<template>
  <div class="main" v-loading="loading">
    <div class="search-box">
      <van-form>
        <van-field v-model="searchBox.carman" name="carman" label="司机" placeholder="请输入司机名称"></van-field>
        <van-field name="datetimePicker" :value="searchBox.time" label="日期" placeholder="点击选择时间"
                   @click="showPicker = true" @focus="noBomBox"
        />
        <van-calendar v-model="showPicker" :min-date="minDate" type="range" allow-same-day @confirm="onConfirm"/>
        <van-button round block size="mini" type="info" @click="submit">搜索</van-button>
      </van-form>
      <!--      <div>-->
      <!--        <el-form :model="searchBox" inline label-width="100px" size="small">-->
      <!--          <el-form-item label="司机">-->
      <!--            <el-input v-model="searchBox.carman" placeholder="请输入司机名"></el-input>-->
      <!--          </el-form-item>-->
      <!--          <el-form-item label="时间段">-->
      <!--            <el-date-picker type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" v-model="searchBox.time"></el-date-picker>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--      </div>-->
      <!--      <div>-->
      <!--        <el-button type="text" @click="submit">查询</el-button>-->
      <!--      </div>-->
    </div>
    <div class="total">
      <div>总计： {{ totalWeight }}公斤</div>
      <div>{{ totalJe }}元</div>
      <div>{{ list.length }}单</div>
    </div>
    <div class="list">
      <el-collapse v-model="collapseActive" @change="handleChange">
        <el-collapse-item v-for="item in list" :key="item.dh" :title="item.khname" :name="item.dh">
          <template slot="title">
            <div class="collapse-title">
              <div>
                <div class="collapse-title-khname">{{ item.khname }}</div>
                <div class="collapse-title-info">{{ item.rq }}</div>
              </div>
              <div>
                <img class="driver-logo" src="@/assets/driver.svg" alt="">
                {{ item.carman }}
              </div>
            </div>
          </template>
          <div class="content">
            <div>单号：{{ item.dh }}</div>
            <div>{{ item.fkfs }}</div>
            <div>金额：{{ item.je }}</div>
            <div>重量：{{ item.totalWeight }}</div>
          </div>
          <div class="zd-detail" v-if="zdDetail[item.dh]">
            <div v-for="(it, id) in zdDetail[item.dh]" :key="id" class="zd-detail-item">
              <div style="flex: 1;">{{ it.spname }}</div>
              <div>{{ it.prnjs.startsWith('0.00') ? it.prnxs : it.prnjs }}</div>
              <div>重量：{{ (it.netweight * it.sl).toFixed(2) }}</div>
              <div>金额：{{ it.je }}</div>
            </div>
          </div>
          <div class="loading" v-else v-loading="true" style="width: 100%;height: 100px;"></div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import { getZDdetail, statisticPageDetail } from '@/api/goods'
import dayjs from 'dayjs'

export default {
  name: 'index',
  data() {
    return {
      searchBox: {
        carman: '',
        time: ''
      },
      list: [],
      zdDetail: {},
      date: [],
      minDate: dayjs().subtract(1, 'year').toDate(),
      showPicker: false,
      collapseActive: [],
      totalWeight: 0,
      loading: false
    }
  },
  computed: {
    totalJe() {
      return this.list.reduce((prev, curr) => {
        return prev + curr.je
      }, 0).toFixed(2)
    }
  },
  methods: {
    init() {
      // this.searchBox.startTime = day
    },
    submit() {
      this.loading = true
      let postData = {
        queryCondition: {
          carman: this.searchBox.carman,
          startTime: dayjs(this.date[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
          endTime: dayjs(this.date[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
        }
      }
      statisticPageDetail(postData).then(res => {
        console.log(res)
        this.list = res.data.records ?? []
        this.totalWeight = res.data.totalWeight
      }).finally(() => {
        this.loading = false
      })

      this.$buryingPoint('查询重量统计', JSON.stringify(postData))
    },
    onConfirm(date) {
      this.date = date
      this.searchBox.time = `${date[0].getMonth() + 1}/${date[0].getDate()} -- ${date[1].getMonth() + 1}/${date[1].getDate()}`
      this.showPicker = false
    },
    noBomBox(Event) {
      document.activeElement.blur()
    },
    handleChange(val) {
      console.log('change', val)
      val.forEach((each) => {
        if(!this.zdDetail[each]) {
          getZDdetail(each).then(res => {
            this.zdDetail[each] = res.data
            let totalWeight = res.data.reduce((prev, curr) => {
              return prev + curr.netweight * curr.sl
            }, 0)
            this.list.find((v) => v.dh === each).totalWeight = totalWeight.toFixed(2)
            this.$forceUpdate()
          })

          this.$buryingPoint('查询重量统计-单据详情', each)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  max-width: 800px;
  height: calc(100vh - 50px);
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .search-box {
    width: 100%;
    display: flex;
    padding: 10px 20px;
    border-bottom: 1px solid #f4f4f4;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    ::v-deep .van-form {
      width: 100%;
    }
  }

  .total {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: auto;
    background-color: rgba(186, 238, 253, 0.65);
    padding: 10px;
    color: #999999;
    font-size: 12px;
  }

  .list {
    padding: 0 10px;

    ::v-deep .el-collapse-item__header {
      height: 100%;
      background-color: #f5f5f5;
    }

    .collapse-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      line-height: 30px;
      //display: flex;
      //justify-content: space-between;
      //align-items: center;
      .driver-logo {
        margin: 0 3px;
      }

      .collapse-title-khname {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .collapse-title-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .content {
      display: flex;
      gap: 20px;
      font-weight: bold;
    }

    .zd-detail {
      max-height: 200px;
      overflow: auto;
    }

    .zd-detail-item {
      border-bottom: 1px solid #ebeef5;
      padding-bottom: 7px;
      display: flex;
      gap: 20px;
    }
  }
}
</style>
